<script setup>
import { useCandidateStore } from '@/stores'
import { ref } from 'vue'
import { candidateUpdateInfoService } from '@/api/candidate'
import avatarCom from '@/views/candidate/components/avatarCom.vue'
const loading = ref(false)
// 基本资料相关
const {
  candidate: {
    username,
    nikename,
    name,
    sex,
    age,
    phone,
    email,
    address,
    education,
    school
  }
} = useCandidateStore()
const userInfo = ref({
  username,
  nikename,
  name,
  sex,
  age,
  phone,
  email,
  address,
  education,
  school
})
userInfo.value.sex = userInfo.value.sex.toString() //确保性别标签正常显示
const formRef = ref()
/*提交修改资料 */
const candidateStore = useCandidateStore()
const onSubmit = async () => {
  const valid = await formRef.value.validate()
  loading.value = true
  const data = {
    username: userInfo.value.username,
    nikename: userInfo.value.nikename,
    name: userInfo.value.name,
    sex: userInfo.value.sex,
    age: userInfo.value.age,
    phone: userInfo.value.phone,
    email: userInfo.value.email,
    address: userInfo.value.address,
    education: userInfo.value.education,
    school: userInfo.value.school
  }

  if (valid) {
    // 直接发送数据对象，不需要转换为 JSON 字符串
    await candidateUpdateInfoService({ candidate: data }) // 请求服务
    await candidateStore.getCandidate()
    loading.value = false
    ElMessage.success('资料修改成功')
  }
}
/*校验规则*/
const rules = {
  nikename: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
  age: [
    { required: true, message: '年龄不能为空', trigger: 'blur' },
    { pattern: /^[1-9]\d{0,1}$/, message: '年龄格式不正确', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '电话号码不能为空', trigger: 'blur' },
    { pattern: /^[0-9]{11}$/, message: '电话号码格式不正确', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ],
  address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
  education: [{ required: true, message: '请选择学历', trigger: 'change' }],
  school: [{ required: true, message: '毕业院校不能为空', trigger: 'blur' }]
}
</script>

<template>
  <layout-com title="基本资料">
    <avatarCom></avatarCom>
    <br />
    <el-row>
      <!-- 基本资料 -->
      <el-col :span="24">
        <el-form
          v-loading="loading"
          element-loading-background="rgba(141,164,195, 0.4)"
          :model="userInfo"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          size="large"
        >
          <el-space wrap>
            <el-form-item label="登录账号">
              <el-input v-model="userInfo.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nikename">
              <el-input v-model="userInfo.nikename"></el-input>
            </el-form-item>
          </el-space>
          <el-space wrap>
            <el-form-item label="真实姓名" prop="name">
              <el-input v-model="userInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="userInfo.sex">
                <el-radio label="1" size="large">男</el-radio>
                <el-radio label="2" size="large">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="userInfo.age"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="userInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="通讯地址" prop="address">
              <el-input v-model="userInfo.address"></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="education">
              <el-select v-model="userInfo.education">
                <el-option label="初中" value="junior"></el-option>
                <el-option label="高中" value="highschool"></el-option>
                <el-option label="本科" value="bachelor"></el-option>
                <el-option label="硕士" value="master"></el-option>
                <el-option label="博士" value="doctorate"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="毕业院校" prop="school">
              <el-input v-model="userInfo.school"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="btu"
                @click="onSubmit"
                color="#354152"
                :dark="isDark"
                >提交修改</el-button
              >
            </el-form-item>
          </el-space>
        </el-form>
      </el-col>
    </el-row>
  </layout-com>
</template>
<style scoped>
.el-form-item {
  width: 300px;
  .btu {
    margin: 0 0 0 70px;
  }
}
</style>
